<template>
  <div>
    <a class="gb-display-block" v-if="displayType === 'LINK'" :disabled="row.analysisStatus !== 'COMPLETED'" @click="showModal">{{ text }}</a>
    <a-modal 
      title="生信文件"
      centered
      :width="1000"
      v-model="visible"
    >
      <div>
        <a-form layout="inline" class="default-search-form gb-flex-form" :form="form" @submit="handleSearch">
          <a-row :gutter="8">
            <a-col :sm="24" :md="12" :lg="8">
              <a-form-item :colon="false" label="文件类型">
                <DictSelector dictCode="BIO_FILE_TYPE" v-decorator="['fileType']" :i18n="false"/>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8">
              <a-form-item class="gb-search-button">
                <a-button class="item" v-if="funcs['AnalysisBioFile']" type="primary" html-type="submit">
                  {{ $t(funcs['AnalysisSearch']) }}
                </a-button>
                <a-button type="primary" class="item" @click="handleReset">
                  {{ $t('reset') }}
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="table-multiple-operations">
          <FileDownload class="item" v-if="funcs['AnalysisBioFile']" text="批量下载" :rows="selectedRows"/>
          <Delete v-if="funcs['AnalysisBioFile']" class="item" text="批量删除" :rows="selectedRows" :callback="handleSearch" url="/backend/file/delete" />
        </div>

        <a-table :columns="columns"
                 :rowKey="record => record.id"
                 :dataSource="data"
                 :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange"
                 size="small"
                 :scroll="{ x: 1000 }"
        >
          <div slot="long_column_ellipsis" slot-scope="text">
            <LongTableColumn>{{ text }}</LongTableColumn>
          </div>

          <div class="table-single-operations" slot="action" slot-scope="text, record">
            <FileDownload class="item" v-if="funcs['AnalysisBioFile']" text="下载" displayType="LINK" :rows="[record]"/>
            <Delete v-if="funcs['AnalysisBioFile']" class="item" text="删除" displayType="LINK" :rows="[record]" :callback="handleSearch"  url="/backend/file/delete" />
          </div>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>
<script>
import axios from "axios";
import common from "@/global/common";
import Delete from "@/components/base/Delete";

export default {
  components: {Delete},
  mounted: function(){
    this.fetch();
  },
  watch:{
  },
  props: {
    text: { type: [String] },
    displayType: { type: [String], default: 'BUTTON' },
    row: { type: [Object], default: () => { return {} } },
  },
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: true,
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {sortField: 'file_name', sortOrder: 'ascend', ...common.getPagination()},
      actionWidth: 0,
    }
  },
  computed: {
    funcs() {
      return common.getVisibleFunc('AnalysisList')
    },
    columns() {
      const columns = [
        { title: "样本编号", dataIndex: 'sampleCode', sorter: true, key: 'sample_code', width: 100, },
        { title: "受检者姓名", dataIndex: 'sampleName',  defaultSortOrder:'ascend', key: 'sample_name', width: 100,},
        { title: "文件类型", dataIndex: 'fileTypeDesc', key: 'file_type', width: 50},
        { title: "文件名", dataIndex: 'fileName', key: 'file_name', scopedSlots: { customRender: 'long_column_ellipsis' }, width: 100},
        { title: this.$t("action"), key: 'action', scopedSlots: { customRender: 'action' }, width: 180, fixed: 'right', }
      ]
      return columns
    },
  },
  methods: {
    showModal() {
      this.visible = true
      this.selectedRowKeys =  [this.value]
    },
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    handleActionWidth (data) {
      this.actionWidth = data
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        this.loading = true
        axios({
          url: '/backend/file/find',
          method: 'get',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            sampleId: this.row.sampleId,
            analysisId: this.row.id,
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.pagination.total = res.data.total;
          this.data = res.data.rows;
        }).catch(() => {

        }).finally(() => {
          this.loading = false;
        })
      });
    }
  }
}
</script>
